<template>
  <f7-page name="form">
    <f7-navbar back-link="Back" title="Form"></f7-navbar>

    <f7-block-title>Form Example</f7-block-title>
    <f7-list no-hairlines-md>
      <f7-list-input
          label="Name"
          placeholder="Your name"
          type="text"
      ></f7-list-input>

      <f7-list-input
          label="E-mail"
          placeholder="E-mail"
          type="email"
      ></f7-list-input>

      <f7-list-input
          label="URL"
          placeholder="URL"
          type="url"
      ></f7-list-input>

      <f7-list-input
          label="Password"
          placeholder="Password"
          type="password"
      ></f7-list-input>

      <f7-list-input
          label="Phone"
          placeholder="Phone"
          type="tel"
      ></f7-list-input>

      <f7-list-input
          label="Gender"
          type="select"
      >
        <option>Male</option>
        <option>Female</option>
      </f7-list-input>

      <f7-list-input
          defaultValue="2014-04-30"
          label="Birth date"
          placeholder="Birth day"
          type="date"
      ></f7-list-input>

      <f7-list-item
          title="Toggle"
      >
        <f7-toggle slot="after"></f7-toggle>
      </f7-list-item>

      <f7-list-input
          :input="false"
          label="Range"
      >
        <f7-range :max="100" :min="0" :step="1" :value="50"
                  slot="input"></f7-range>
      </f7-list-input>

      <f7-list-input
          label="Textarea"
          placeholder="Bio"
          type="textarea"
      ></f7-list-input>
      <f7-list-input
          label="Resizable"
          placeholder="Bio"
          resizable
          type="textarea"
      ></f7-list-input>
    </f7-list>

    <f7-block-title>Buttons</f7-block-title>
    <f7-block strong>
      <f7-row tag="p">
        <f7-button class="col">Button</f7-button>
        <f7-button class="col" fill>Fill</f7-button>
      </f7-row>
      <f7-row tag="p">
        <f7-button class="col" raised>Raised</f7-button>
        <f7-button class="col" fill raised>Raised Fill</f7-button>
      </f7-row>
      <f7-row tag="p">
        <f7-button class="col" round>Round</f7-button>
        <f7-button class="col" fill round>Round Fill</f7-button>
      </f7-row>
      <f7-row tag="p">
        <f7-button class="col" outline>Outline</f7-button>
        <f7-button class="col" outline round>Outline Round</f7-button>
      </f7-row>
      <f7-row tag="p">
        <f7-button class="col" outline small>Small</f7-button>
        <f7-button class="col" outline round small>Small Round</f7-button>
      </f7-row>
      <f7-row tag="p">
        <f7-button class="col" fill small>Small</f7-button>
        <f7-button class="col" fill round small>Small Round</f7-button>
      </f7-row>
      <f7-row tag="p">
        <f7-button class="col" large raised>Large</f7-button>
        <f7-button class="col" fill large raised>Large Fill</f7-button>
      </f7-row>
      <f7-row tag="p">
        <f7-button class="col" color="red" fill large raised>Large Red
        </f7-button>
        <f7-button class="col" color="green" fill large raised>Large Green
        </f7-button>
      </f7-row>
    </f7-block>

    <f7-block-title>Checkbox group</f7-block-title>
    <f7-list>
      <f7-list-item
          checkbox
          name="my-checkbox"
          title="Books"
          value="Books"
      ></f7-list-item>
      <f7-list-item
          checkbox
          name="my-checkbox"
          title="Movies"
          value="Movies"
      ></f7-list-item>
      <f7-list-item
          checkbox
          name="my-checkbox"
          title="Food"
          value="Food"
      ></f7-list-item>
    </f7-list>

    <f7-block-title>Radio buttons group</f7-block-title>
    <f7-list>
      <f7-list-item
          name="radio"
          radio
          title="Books"
          value="Books"
      ></f7-list-item>
      <f7-list-item
          name="radio"
          radio
          title="Movies"
          value="Movies"
      ></f7-list-item>
      <f7-list-item
          name="radio"
          radio
          title="Food"
          value="Food"
      ></f7-list-item>
    </f7-list>
  </f7-page>
</template>